<template>
  <div class="login_block">
  
    <div>
      <a-input
        v-model="textName"
        v-decorator="[
          'note',
          { rules: [{ required: true, message: 'Please input your note!' }] },
        ]"
      />
    </div>

    <a-button @click="addCount" type="primary">
      新增
    </a-button>
    <div>{{ name }}</div>
    <div>计算属性名{{mixName}}</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'login',
  data() {
    return {
      textName: "",// 测试姓名
      count: 0,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        phone: '',
        password: '',
      },
    }
  },
  created() {
    this.count = this.$store.state.count
  },
  computed: {
    ...mapState({ name: (state) => state.name }),
    // 当依赖的数据发生变化的时候才进行触发
    mixName: function(){
      console.log(`监听${textName}数据的变化`)
        return this.textName+'.com'
    }
  },
  methods: {
    // 请求登录
    login() {},
    addCount() {
      this.count++
      this.$store.commit('countAdd', this.count) // 直接通过mutations
      //this.$store.dispatch('countAdd',this.count) // 通过actions
    },
  },
}
</script>

<style scoped lang="less">
.login_block {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  background: url('../assets/img/avatar.jpg') repeat;
}
.login_card {
  margin-top: 200px;
  padding: 50px 0 0 0;
}
</style>
